<template>
  <div>
    <!-- 查询和其他操作 -->
    <a-card class="s-card">
      <div class="filter">
        <a-form>
          <a-row>
            <a-col :lg="8" :md="12" :sm="24">
              <a-form-item label="部门">
                <a-select v-model="listQuery.deptId" placeholder="请选择">
                  <a-select-option
                    v-for="item in departmentList"
                    :key="item.deptId"
                    :value="item.deptId"
                  >
                    {{ item.deptName }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :lg="8" :md="12" :sm="24">
              <a-form-item label="月份">
                <a-month-picker
                  v-model="listQuery.selectedMonth"
                  :allow-clear="false"
                  placeholder="请选择"
                  @change="onChangeMonth"
                />
              </a-form-item>
            </a-col>
            <a-col :lg="8" :xs="0">
              <a-button type="primary" @click="handleFilter">查找 </a-button>
              <a-button @click="handleReset">重置</a-button>
            </a-col>
          </a-row>
          <!-- 适配小屏幕 -->
          <a-row>
            <a-col :lg="0" :md="12" :sm="24">
              <a-button type="primary" @click="handleFilter">查找 </a-button>
              <a-button @click="handleReset">重置</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <div>
        <!-- 查询结果 -->
        <a-table
          ref="table"
          :loading="listLoading"
          class="s-table"
          :data-source="list"
          :row-key="record => record.index"
          :locale="{ emptyText: '无符合筛选条件的筛选项，请重新筛选！' }"
          :pagination="false"
        >
          <a-table-column
            title="序号"
            data-index="index"
            class="index-td"
            align="center"
          />
          <a-table-column title="部门" data-index="deptName" align="center" />
          <a-table-column title="提交日期" data-index="year" align="center">
            <template slot-scope="text, item">
              {{ item.a || '暂无' }}
            </template>
          </a-table-column>
          <a-table-column title="状态" data-index="status" align="center">
            <template slot-scope="text, item">
              <a-tag>{{ item.a || '待上报' }}</a-tag>
            </template>
          </a-table-column>
          <!-- fixed="right"-->
          <a-table-column key="action" title="操作" align="center">
            <template slot-scope="text, record">
              <span
                class="primary-link"
                @click="handleEdit(record.departmentId)"
              >
                查看</span>
            </template>
          </a-table-column>
        </a-table>
      </div>
    </a-card>
    <TimetableExchangeSettingSave
      v-if="edit"
      ref="SalaryTuitionfeeIndex"
      :data="editForm"
      @refreshDataList="edit = false || getList()"
      @dialogClosed="edit = false"
    />
  </div>
</template>
<style>
.index-td {
  width: 70px;
}
.textarea-td {
  width: 21%;
}
</style>
<script>
import { STable, PageView } from '@/components'
import { del } from '@/pages/timetable/api/timetableExchangeSettingIndex'
import { mapState } from 'vuex'
import TimetableExchangeSettingSave from '@/pages/timetable/TimetableExchangeSettingSave'
export default {
  name: 'SalaryTuitionfeeIndex',
  components: {
    STable,
    PageView,
    TimetableExchangeSettingSave
  },
  async fetch ({ app, store }) {
    if (!app.$get(store, 'state.basic.deptList.length')) {
      app.$departmentListFunc()
    }
  },
  data () {
    return {
      url: '/admin/salary/audit/page',
      list: [],
      total: 0,
      listLoading: false,
      listQuery: {
        month: 0,
        year: 0,
        type: '课时费审核'
      },
      editForm: {},
      edit: false,
      downloadLoading: false,
      approvalStatusList: [],
      departmentList: []
    }
  },
  computed: {
    ...mapState({
      deptMaps: state => state.basic.deptMaps
    })
  },
  watch: {
    $route (t, f) {
      if (this.$get(t, 'name') === 'salary-SalaryTuitionfeeIndex') {
        this.getList()
      }
    }
  },
  mounted () {
    this.$departmentListFunc().then(data => {
      this.departmentList = data
    })
    this.getList()
  },
  methods: {
    getList () {
      this.$fetchList()
    },
    handleFilter () {
      this.getList()
    },
    handleReset () {
      this.listQuery = {
        month: 0,
        year: 0,
        type: '课时费审核'
      }
      this.getList()
    },
    handleDownload () {},
    handleDelete (row) {
      this.$handleBtnClick(del, row.departmentId, '删除')
    },
    handleEdit (departmentId) {
      this.$router.push({ name: 'rating-RatingIndex' })
    },
    onChangeMonth (date, dateString) {
      if (dateString) {
        this.listQuery.month = dateString.split('-')[1]
        this.listQuery.year = dateString.split('-')[0]
      }
    }
  }
}
</script>
